<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="chart-container">
          <div id="main" class="chart"/>
        </div>
      </el-col>

      <el-col :span="8" >
        <div class="detailsBar" style="float: right" @mouseover="getShow()" @mouseleave="getOff()">
          <div v-show="onShow">
            <h3 style="margin-left: 10px">概览</h3>
            <p style="margin-left: 10px">节点标签</p>
            <div style="margin-left: 10px">
              <tag style="color:#F79767">标签二</tag>
              <el-tag style="color:#F79767">标签三</el-tag>
              <el-tag style="color:#F79767">标签四</el-tag>
              <el-tag style="color:#F79767">标签五</el-tag>
            </div>
          </div>
          <div v-show="offShow">
            <h3 style="margin-left: 10px">节点属性</h3>
            <el-form :model="nodeDetail" ref="nodeDetail" style="margin-left: 10px" label-position="right" >
              <el-form-item label="id" prop="id">
                <p>{{currentNode.id}}</p>
              </el-form-item>
              <el-form-item label="名称" prop="name">
                <p>{{currentNode.name}}</p>
              </el-form-item>
              <el-form-item label="节点编号" prop="code">
                <p>{{currentNode.code}}</p>
              </el-form-item>
              <el-form-item label="节点类型" prop="type">
                <p>{{currentNode.type}}</p>
              </el-form-item>
              <el-form-item label="属性键" prop="propertiesKey">
                <p>{{currentNode.propertiesKey}}</p>
              </el-form-item>
              <el-form-item label="属性值" prop="propertiesValue">
                <p>{{currentNode.propertiesValue}}</p>
              </el-form-item>

            </el-form>
          </div>
        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import course from '@/api/management/course'

export default {
  data() {
    return {
      labelPosition: 'right',
      nodeDetail:{},
      currentNode:{},
      onShow: true,
      offShow: false,
      graphData: {
        "nodes": [],
        "links": [],
        "types": [{name: "课程", itemStyle: {color: '#F79767'}},
          {name: "目录", itemStyle: {color: '#91cc75'}},
          {name: "知识点", itemStyle: {color: '#ee6666'}},
          {name: "资源", itemStyle: {color: '#fac858'}}]
      }
    }
  },
  created() {
  },
  mounted() {
    this.initChart()

  },
  methods: {
    getShow() {
      this.onShow = false;
      this.offShow = true;
    },
    getOff() {
      this.onShow = true;
      this.offShow = false;
    },
    // 显示知识图谱
    initChart() {
      const chartDom = document.getElementById('main');
      const myChart = echarts.init(chartDom);
      let option;

      myChart.showLoading();
      course.getAllNode().then(res => {
        const {nodes, links} = res.data
        this.graphData.nodes = nodes
        this.graphData.links = links
        myChart.hideLoading();
        // 设置节点大小
        this.graphData.nodes.forEach(function (node) {
          switch (node.type) {
            case "课程":
              node.symbolSize = 80;
              break
            case "目录":
              node.symbolSize = 60;
              break
            case "知识点":
              node.symbolSize = 50;
              break
            case "资源":
              node.symbolSize = 40;
              break
          }
        });
        option = {
          title: {
            text: '知识图谱关系图',
            subtext: 'Default layout',
            top: 'bottom',
            left: 'right'
          },
          tooltip: {
            formatter: function (x) {
              return x.data.propertiesValue;
            }
          },
          // 工具箱：筛选节点
          toolbox: {
            // 显示工具箱
            show: true,
            feature: {
              mark: {
                show: true
              },
              // 还原
              restore: {
                show: true
              },
              // 保存为图片
              saveAsImage: {
                show: true
              }
            }
          },
          // 设置筛选图例，因为动态设置了节点颜色导致此项无效
          legend: [
            {
              data: this.graphData.types.map(function (a) {
                return a.name;
              }),
            },
          ],
          color: ['#F79767', '#91cc75', '#ee6666', '#fac858'],

          series: [
            {
              name: '知识图谱关系图',
              type: 'graph',// 类型:关系图
              layout: 'force',//图的布局，类型为力导图
              data: this.graphData.nodes,
              links: this.graphData.links,
              categories: this.graphData.types,
              roam: true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
              edgeSymbol: ["none", 'arrow'],//关系两边的展现形式，也即图中线两端的展现形式。arrow为箭头
              force: {
                // 关系线条长度
                repulsion: 3000,
                edgeLength: [10, 50]
              },
              itemStyle: {
                color: (params => {
                    switch (params.data.type) {
                      case "课程":
                        return '#F79767'
                      case "目录":
                        return '#91cc75'
                      case "知识点":
                        return '#ee6666'
                      case "资源":
                        return '#fac858'
                    }
                  }
                ),
                // borderTypeL:"solid",
                // borderColor:'rgb(75,86,100,0.4)'
              },
              draggable: true,
              lineStyle: {
                normal: {
                  width: 1,
                  color: '#4b565b',
                }
              },
              edgeLabel: {
                normal: {
                  show: true,
                  fontSize: 8,
                  formatter: x => (x.data.name)
                }
              },
              // 是否显示节点名称和文字显示位置
              label: {
                show: true,
                position: 'inside',
                fontSize: 8,
                width: 8,
                overflow: 'truncate'

              }
            }
          ]
        };
        option && myChart.setOption(option);
        myChart.on('click', function (param) {
          console.log(param);
        })
      })

    }
  }

}
</script>

<style scoped>
.el-form-item__label-wrap {
  margin-left: 10px !important;
}

.chart {
  height: 600px;
  width: 900px;
  /*background-color: rgb(234, 237, 243);*/
}

.detailsBar {
  height: 600px;
  width: 300px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  border: solid 1px #8b8b8b;
}
</style>
